<template>
  <div>
    <div class="weui-flex header">
      <div class="weui-flex__item" :class="active === 1 ? 'active' : 'none'">
        <div class="placeholder" @touchstart.stop.prevent="active = 1">
          <svg-icon icon-class="merchant" class="merchant"></svg-icon>
        </div>
        <span>基础信息<svg-icon width="15px" height="15px" :fill="status.base_chk_status === 10 ? '#1599FF' : status.base_chk_status === 20 ? '#5CCF56' : status.base_chk_status === -10 ? '#FF4242' : ''" :icon-class="status.base_chk_status === 10 ? 'tip' : status.base_chk_status === 20 ? 'success' : status.base_chk_status === -10 ? 'error' : ''"></svg-icon></span>
      </div>
      <div class="weui-flex__item" :class="active === 2 ? 'active' : 'none'">
        <div class="placeholder" @touchstart.stop.prevent="active = 2"><svg-icon icon-class="bank" class="bank"></svg-icon></div>
        <span>账户信息<svg-icon width="15px" height="15px" :fill="status.bank_chk_status === 10 ? '#1599FF' : status.bank_chk_status === 20 ? '#5CCF56' : status.bank_chk_status === -10 ? '#FF4242' : ''" :icon-class="status.bank_chk_status === 10 ? 'tip' : status.bank_chk_status === 20 ? 'success' : status.bank_chk_status === -10 ? 'error' : ''"></svg-icon></span>
      </div>
      <div class="weui-flex__item" :class="active === 3 ? 'active' : 'none'">
        <div class="placeholder" @touchstart.stop.prevent="active = 3"><svg-icon icon-class="wode_1" class="leader"></svg-icon></div>
        <span>法人信息<svg-icon width="15px" height="15px" :fill="status.leader_chk_status === 10 ? '#1599FF' : status.leader_chk_status === 20 ? '#5CCF56' : status.leader_chk_status === -10 ? '#FF4242' : ''" :icon-class="status.leader_chk_status === 10 ? 'tip' : status.leader_chk_status === 20 ? 'success' : status.leader_chk_status === -10 ? 'error' : ''"></svg-icon></span>
      </div>
      <div class="weui-flex__item" :class="active === 4 ? 'active' : 'none'">
        <div class="placeholder" @touchstart.stop.prevent="active = 4"><svg-icon icon-class="lianxiren1" class="lianxiren"></svg-icon></div>
        <span>联系人信息<svg-icon width="15px" height="15px" :fill="status.contact_chk_status === 10 ? '#1599FF' : status.contact_chk_status === 20 ? '#5CCF56' : status.contact_chk_status === -10 ? '#FF4242' : ''" :icon-class="status.contact_chk_status === 10 ? 'tip' : status.contact_chk_status === 20 ? 'success' : status.contact_chk_status === -10 ? 'error' : ''"></svg-icon></span>
      </div>
    </div>
    <div class="main">
      <s-base v-if="active === 1"></s-base>
      <s-bank v-if="active === 2"></s-bank>
      <s-contact v-if="active === 3"></s-contact>
      <s-leader v-if="active === 4"></s-leader>
    </div>
  </div>
</template>

<script>
import SBase from './compoments/base'
import SBank from './compoments/bank'
import SContact from './compoments/principal'
import SLeader from './compoments/leader'
import { GetMerchantInfo } from '@/api/salesman'

export default {
  name: 'baseList',
  data() {
    return {
      active: 1,
      status: {}
    }
  },
  components: {
    SBase,
    SBank,
    SContact,
    SLeader
  },
  created() {
    this.$loading(true, '正在加载')
    GetMerchantInfo(this.$route.query.merchant_num).then(res => {
      if (res.data.errorCode === 0) {
        this.$loading(false)
        this.status = res.data.result.info_status
      } else {
        this.$loading(false)
        this.$weui.alert(res.data.errorMsg)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/index.scss';
.main {
  padding: px2rem(30px);
  .show {
    /deep/ .weui-flex {
      padding-bottom: px2rem(40px);
      font-size: px2rem(28px);
      color: #444;
    }
    /deep/ .weui-uploader__input-box:before, /deep/ .weui-uploader__input-box:after {
      content: unset;
    }
  }
}
.header {
    width: 100%;
    position: relative;
    padding: px2rem(30px) 0;
    border-bottom: 1px solid #ccc;
    .active .placeholder {
      background-color: $blue;
    }
  }
  .header .merchant, .bank, .leader, .lianxiren {
    width: px2rem(50px);
    height: px2rem(50px);
    color: #fff;
  }
  .header .placeholder {
    background: #eee;
    border-radius: 50%;
    padding: px2rem(10px);
    height: px2rem(100px);
    width: px2rem(100px);
    line-height: px2rem(100px);
    text-align: center;
    display: inline-block;
  }
  .header .weui-flex__item {
    z-index: 10;
    position: relative;
    display: inline-block;
    width: 25%;
    text-align: center;
    span {
      font-size: px2rem(24px);
      display: block;
    }
}
</style>
